import React from 'react';
import { Col, Form, Button, Modal, Row, Input, Select } from 'antd';
const R = require('ramda');
import { message } from "antd";
const FormItem = Form.Item;
import BizParams from '../../components/commons/BizParams';
import AreaSelect from '../../components/commons/AreaSelect';
import Constants from '../../utils/Constants';
import SingleDragger from '../../components/commons/SingleDragger';

export default Form.create({ wrappedComponentRef: true })(class VipSendTaxInfo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            open: false,
            searchConditions: {},
            dataSource: {},
            sendLoading: false
        };
    }

    handleOpen = (searchConditions, dataSource) => {
        this.setState({ open: true, searchConditions: searchConditions, dataSource: dataSource });
    }

    handleCancel = () => {
        this.props.form.resetFields();
        this.refs.vipTaxInfoAttach.resetUpload();
        this.setState({ open: false });
    }

    handleSend = () => {
        this.props.form.validateFields({ force: true }, (errors, values) => {
            if (errors) return;
            values.attachUrl = this.refs.vipTaxInfoAttach.getUrl();
            if(R.isNil(values.attachUrl) || R.isEmpty(values.attachUrl)){
                message.info("附件不能为空");
                return;
            }
            this.setState({ sendLoading: true });
            values.regId = this.state.dataSource.id;
            this.props.dispatch({
                type: 'vipManage/sendFinanceEmail',
                payload: {
                    sendInfo: values,
                    onSuccess: () => {
                        this.setState({ sendLoading: false })//button loading revert
                        this.handleCancel();//close modal window
                    },
                    onFail: () => this.setState({ sendLoading: false })
                }
            });
        })
    }

    render() {
        let formItemLayout = { labelCol: { span: 7 }, wrapperCol: { span: 17 } };
        const { getFieldDecorator } = this.props.form;
        let footer = [
            <Button key="send" size="large" loading={this.state.sendLoading} disabled={this.state.disabled && this.state.subDisabled || this.state.sendLoading} onClick={() => this.handleSend()}>发送</Button>,
            <Button key="cancel" size="large" disabled={this.state.disabled && this.state.subDisabled || this.state.sendLoading} onClick={this.handleCancel.bind(this)}>取消</Button>
        ]
        return (
            <Modal maskClosable={false} footer={this.state.disabled && this.state.subDisabled ? null : footer} visible={this.state.open} title={"财税附件发送"} width={500} wrapClassName="vertical-center-modal" onCancel={this.handleCancel.bind(this)}>
                <Form>
                    <Row>
                        <Col span={20}>
                            <FormItem {...formItemLayout} label="收件人名称" hasFeedback>
                                {getFieldDecorator('revuserName', {
                                    rules: [{
                                        required: true, message: '请输入收件人名称',
                                    }],
                                })(
                                    <Input maxLength="100" />
                                    )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={20}>
                            <FormItem {...formItemLayout} label="收件人邮箱" hasFeedback>
                                {getFieldDecorator('revuser', {
                                    rules: [{
                                        required: true, message: '请输入收件人邮箱',
                                        type: 'email', message: '邮箱格式不正确'
                                    }],
                                })(
                                    <Input maxLength="50" />
                                    )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={20}>
                            <FormItem {...formItemLayout} label={<span className="ant-form-item-required">财税附件</span>} hasFeedback>
                                <SingleDragger ref="vipTaxInfoAttach" dataSource={this.state.dataSource} module={Constants.FILE_MODULE[1]} />
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        );
    }
})